import React from 'react';
import { SlotProvider, Slot, SlotScopeProvider, SlotScope } from '@/';

interface MyComponentProps {
  title: string;
}

export function MyComponent({ title }: MyComponentProps) {
  return (
    <SlotProvider>
      {(slots) => (
        <div className="my-component">
          <h1>{title}</h1>
          <div className="my-component__content">
            <Slot name="header" />
            <SlotScopeProvider name="body">
              {(scope) => (
                <>
                  <SlotScope name="row" id={1}>
                    <div className="my-component__row">
                      <div className="my-component__cell">{scope.rowData1}</div>
                      <div className="my-component__cell">{scope.rowData2}</div>
                    </div>
                  </SlotScope>
                  <SlotScope name="row" id={2}>
                    <div className="my-component__row">
                      <div className="my-component__cell">{scope.rowData3}</div>
                      <div className="my-component__cell">{scope.rowData4}</div>
                    </div>
                  </SlotScope>
                </>
              )}
            </SlotScopeProvider>
            <Slot name="footer" />
          </div>
        </div>
      )}
    </SlotProvider>
  );
}
